<template>
  <div class="bigData">
    <div class="mask" v-if="mask">
      <dv-loading style="font-size: 2rem">加载中...</dv-loading>
    </div>
    <v-fullpage ref="fullpage">
      <div slot="section" style="position: relative">
        <div class="container">
          <div class="left">
            <div class="leftItem" style="height: 25%">
              <dv-border-box-13>
                <div class="itemTitle">
                  <div class="itemTitle_left">今日停车汇总</div>
                </div>
                <LeftAbout :todayStatistics="todayStatistics"></LeftAbout>
              </dv-border-box-13>
            </div>
            <div class="leftItem">
              <dv-border-box-12>
                <div class="itemTitle">
                  <div class="itemTitle_left">进场摄像头</div>
                  <div class="itemTitle_right">
                    <div class="itemTitle_right_btn">
                      <el-switch
                        v-model="camera_in"
                        active-text="开启"
                        inactive-text="关闭"
                      >
                      </el-switch>
                    </div>
                  </div>
                </div>
                <CameraIn :camera_in="camera_in"></CameraIn>
              </dv-border-box-12>
            </div>
            <div class="leftItem" style="height: 40%">
              <dv-border-box-12>
                <div class="itemTitle">
                  <div class="itemTitle_left">收入统计</div>
                  <div class="itemTitle_right_btn2">
                    <ul @click="switchIncome" ref="ul">
                      <li class="active" ref="income_7">7日</li>
                      <li ref="income_30">30日</li>
                    </ul>
                  </div>
                </div>
                <IncomeAbout :income_7="income_7"></IncomeAbout>
              </dv-border-box-12>
            </div>
          </div>
          <div class="center">
            <div class="title">
              <span style="allBigTitle">智慧停车场管理平台</span>
            </div>
            <div class="weather">
              <dv-border-box-12>
                <div class="weatherItem1">
                  <div class="runTime">{{ nowTime }}</div>
                  <div class="nowTime">
                    <span>{{ nowDate }}</span>
                    <span v-if="nowTime.slice(0, 2) < 12">AM</span>
                    <span v-else style="margin-left: 10px">PM</span>
                    <span style="margin-left: 10px">{{ week }}</span>
                  </div>
                </div>
                <div class="weatherItem2">
                  <div class="weatherIcon">
                    <div class="icon sunny">
                      <div class="sun" v-if="weather.forecast[0].type == '晴'">
                        <div class="rays"></div>
                      </div>
                    </div>
                    <div
                      class="icon cloudy"
                      v-if="weather.forecast[0].type == '多云'"
                    >
                      <div
                        class="cloud"
                        v-if="weather.forecast[0].type == '多云'"
                      >
                        <div class="cloud"></div>
                      </div>
                    </div>
                  </div>
                  <div class="weatherInfo">
                    <div>
                      {{ weather.forecast[0].type }}
                    </div>
                    <div>
                      {{
                        weather.forecast[0].high.slice(2, 6) +
                        " - " +
                        weather.forecast[0].low.slice(2, 6)
                      }}
                    </div>
                    <div>{{ weather.city }}</div>
                  </div>
                </div>
              </dv-border-box-12>
            </div>
            <div class="chinaMap">
              <dv-border-box-8 :dur="8">
                <ChinaMap :carPlate_province="carPlate_province"></ChinaMap>
                <Ranking :carPlate_province="carPlate_province"></Ranking>
              </dv-border-box-8>
            </div>
          </div>
          <div class="right">
            <div class="rightItem" style="height: 25%">
              <dv-border-box-13>
                <div class="itemTitle">
                  <div class="itemTitle_left">停车场汇总</div>
                </div>
                <RightAbout :allStatistics="allStatistics"></RightAbout>
              </dv-border-box-13>
            </div>
            <div class="rightItem">
              <dv-border-box-12>
                <div class="itemTitle">
                  <div class="itemTitle_left">出场摄像头</div>
                  <div class="itemTitle_right">
                    <div class="itemTitle_right_btn">
                      <el-switch
                        v-model="camera_out"
                        active-text="开启"
                        inactive-text="关闭"
                      >
                      </el-switch>
                    </div>
                  </div>
                </div>
                <CameraOut :camera_out="camera_out"></CameraOut>
              </dv-border-box-12>
            </div>
            <div class="rightItem" style="height: 40%">
              <dv-border-box-12>
                <div class="itemTitle">
                  <div class="itemTitle_left">进出记录</div>
                </div>
                <Rotation
                  :RecordIn="RecordIn"
                  :RecordOut="RecordOut"
                ></Rotation>
              </dv-border-box-12>
            </div>
          </div>
        </div>
        <div class="nextTips" @click="nextPage">
          <i class="el-icon-arrow-down"></i>
          <i class="el-icon-arrow-down"></i>
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
      <div slot="section">
        <div class="container2">
          <SpaceMap :SpaceList="SpaceList" :Railing="Railing"></SpaceMap>
          <div class="nextTips2" @click="backPage">
            <i class="el-icon-arrow-up"></i>
            <i class="el-icon-arrow-up"></i>
            <i class="el-icon-arrow-up"></i>
          </div>
        </div>
      </div>
    </v-fullpage>
  </div>
</template>

<script>
import ChinaMap from "../components/ChinaMap.vue";
import CameraIn from "../components/Camera/CameraOfIn.vue";
import CameraOut from "../components/Camera/CameraOfOut.vue";
import Rotation from "../components/Rotation/Rotation.vue";
import LeftAbout from "../components/BigDataAbout/LeftAbout.vue";
import RightAbout from "../components/BigDataAbout/RightAbout.vue";
import IncomeAbout from "../components/BigDataAbout/IncomeAbout.vue";
import Ranking from "../components/BigDataAbout/Ranking.vue";
import SpaceMap from "../components/BigDataAbout/SpaceMap.vue";
import { province } from "../utils/province";

import screenfull from "screenfull";
export default {
  name: "BigData",
  components: {
    ChinaMap,
    CameraIn,
    CameraOut,
    Rotation,
    LeftAbout,
    RightAbout,
    IncomeAbout,
    Ranking,
    SpaceMap,
  },
  data() {
    return {
      isFullscreen: true,
      webSocketPath: "ws://81.68.226.147:8080/websocket",
      socket: "",
      mask: true,
      nowTime: "00:00:00",
      nowDate: "2021-12-6",
      week: "星期一",
      weather: {
        yesterday: {
          date: "6日星期一",
          high: "高温 22℃",
          fx: "东北风",
          low: "低温 12℃",
          fl: "",
          type: "晴",
        },
        city: "东莞",
        forecast: [
          {
            date: "7日星期二",
            high: "高温 22℃",
            fengli: "",
            low: "低温 10℃",
            fengxiang: "东北风",
            type: "晴",
          },
          {
            date: "8日星期三",
            high: "高温 22℃",
            fengli: "",
            low: "低温 10℃",
            fengxiang: "东风",
            type: "多云",
          },
          {
            date: "9日星期四",
            high: "高温 23℃",
            fengli: "",
            low: "低温 12℃",
            fengxiang: "东北风",
            type: "晴",
          },
          {
            date: "10日星期五",
            high: "高温 23℃",
            fengli: "",
            low: "低温 15℃",
            fengxiang: "东风",
            type: "晴",
          },
          {
            date: "11日星期六",
            high: "高温 24℃",
            fengli: "",
            low: "低温 15℃",
            fengxiang: "东风",
            type: "晴",
          },
        ],
        ganmao: "感冒易发期，外出请适当调整衣物，注意补充水分。",
        wendu: "13",
      },
      status: 1000,
      desc: "OK",
      camera_in: false,
      camera_out: false,
      income_7: true,
      todayStatistics: {
        distinguish_count_In: 0,
        distinguish_count_Out: 0,
        parking_now: 0,
        count_visitor: 0,
      },
      allStatistics: {
        device_count: 2,
        count_user: 0,
        parking_count: 0,
      },
      carPlate_province: [
        {
          name: "北京",
          value: 20,
        },
      ],
      SpaceList: [],
      Railing: {
        Railing_in: false,
        Railing_out: false,
      },
      RecordIn: {
        dred_type: "进",
        car_plate: "test",
        dred_time: "2021-10-11 19:54:19",
      },
      RecordOut: {
        dred_type: "出",
        car_plate: "test",
        dred_time: "2021-10-11 19:54:19",
      },
    };
  },
  created() {
    this.getWeather();
    this.websocketInit();
  },
  mounted() {
    let timer = setTimeout(() => {
      this.mask = false;
      clearTimeout(timer);
    }, 5000);
    this.moveTime(); //动态时间
    this.getDate(); //当前日期
    this.getWeek(); //获取周几
    window.onresize = () => {
      if (!this.checkFull()) {
        this.isFullscreen = false;
      }
    };
    this.fullScreen();
  },
  methods: {
    checkFull() {
      var isFull =
        document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
    fullScreen() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "你的浏览器不支持全屏",
          type: "warning",
        });
        return false;
      }
      screenfull.request();
      this.isFullscreen = true;
    },
    //初始化Websocket
    websocketInit() {
      if (typeof WebSocket === "undefined") {
        this.$alert("您的浏览器不支持socket", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        // 实例化webSocket
        this.socket = new WebSocket(this.webSocketPath);
        // 监听webSocket连接
        this.socket.onopen = () => {
          this.$message({
            message: "webSocket连接成功",
            type: "success",
          });
        };
        // 监听webSocket错误信息
        this.socket.onerror = (e) => {
          this.$message.error("webSocket连接错误");
        };
        // 监听webSocket消息
        this.socket.onmessage = (msg) => {
          this.websocketGetMessage(msg);
        };
      }
    },
    websocketGetMessage(msg) {
      const data = JSON.parse(msg.data);
      // 停车场实时数据
      if (data.webSocketId === 1) {
        this.SpaceList = data.spaceList;
      }
      //用户数量 + 访客数量
      if (data.webSocketId === 3) {
        this.allStatistics.count_user = data.Count_user;
        this.todayStatistics.count_visitor = data.Count_visitor;
      }
      // 今日进出场数量 + 全国省份进入停车场数据
      if (data.webSocketId === 4) {
        this.todayStatistics.distinguish_count_In = data.Distinguish_count_In;
        this.todayStatistics.distinguish_count_Out = data.Distinguish_count_Out;
        const carPlate_province = data.carPlate_province;
        let arr = [];
        for (let key in carPlate_province) {
          const proviceName = province(key);
          let item = {
            name: proviceName,
            value: carPlate_province[key],
          };
          arr.push(item);
        }
        this.carPlate_province = arr;
      }
      // 现停车数+总停车数
      if (data.webSocketId === 5) {
        this.todayStatistics.parking_now = data.parking_now;
        this.allStatistics.parking_count = data.parking_count;
      }
      // 栏杆状态
      if (data.webSocketId === 6) {
        this.Railing.Railing_in = data.Railing_in;
        this.Railing.Railing_out = data.Railing_out;
      }
      // 进场识别
      if (data.webSocketId === 7) {
        const visitor = {
          dred_type: data.type,
          car_plate: data.carPlate,
          dred_time: data.time,
        };
        this.RecordIn = visitor;
      }
      // 出场识别
      if (data.webSocketId === 8) {
        const visitor = {
          dred_type: data.type,
          car_plate: data.carPlate,
          dred_time: data.time,
        };
        this.RecordOut = visitor;
      }
    },
    websocketSend() {
      this.socket.send(params);
    },
    //当前日期
    getDate() {
      let date = new Date();
      let seperator = "/";
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let currentdate = year + seperator + month + seperator + strDate;
      this.nowDate = currentdate;
    },
    //获取周几
    getWeek() {
      const arr = new Array("日", "一", "二", "三", "四", "五", "六");
      let week = new Date().getDay();
      this.week = "星期" + arr[week];
    },
    //动态时间
    moveTime() {
      let that = this;
      function loop() {
        let nowTime;
        let date = new Date();
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const seconds = date.getSeconds();
        const nhours = hours < 10 ? "0" + hours : hours;
        const nminutess = minutes < 10 ? "0" + minutes : minutes;
        const nseconds = seconds < 10 ? "0" + seconds : seconds;
        nowTime = nhours + ":" + nminutess + ":" + nseconds;

        that.nowTime = nowTime;
      }
      setInterval(loop, 1000);
    },
    nextPage() {
      this.$refs.fullpage.next();
    },
    backPage() {
      this.$refs.fullpage.pre();
    },
    //切换收入统计
    switchIncome(e) {
      let listArr = [];
      const li = this.$refs.ul.getElementsByTagName("li");
      Array.prototype.slice.call(li).forEach((li) => {
        listArr.push(li);
      });
      e.target.innerText === "7日"
        ? (this.income_7 = true)
        : (this.income_7 = false);
      listArr.forEach((li) => li.classList.remove("active"));
      e.target.classList.add("active");
    },
    //获取天气数据
    getWeather() {
      this.axios.get("/component/weather").then((res) => {
        this.weather = res.data.data.data;
      });
    },
    destroyed() {
      // 销毁监听
      this.socket.onclose = () => {
        this.$message({
          message: "webSocket已经关闭",
          type: "warning",
        });
      };
    },
  },
};
</script>

<style scoped>
@import url("../assets/css/WeatherStyle.css");

* {
  box-sizing: border-box;
  padding: 0;
}

.bigData {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  background-image: url("../assets/image/index_bg.png");
  background-size: 100% 100%;
  color: #4ecfbd;
  flex-direction: row;
  justify-content: space-between;
}
.nextTips {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 30px;
  height: 110px;
  transform: translate(-50%, 0);
  text-align: center;
  z-index: 99;
}
.nextTips2 {
  position: absolute;
  top: 0;
  right: 5%;
  width: 30px;
  height: 110px;
  transform: translate(0, 0);
  text-align: center;
  z-index: 99;
}
.nextTips:hover {
  cursor: pointer;
}
.nextTips2:hover {
  cursor: pointer;
}
.nextTips i {
  font-size: 1.3rem;
  color: #4ecfbd;
  animation: run linear 2s infinite;
}
.nextTips2 i {
  font-size: 1.3rem;
  color: #ffffff;
  animation: run2 linear 2s infinite;
}
@keyframes run {
  0%,
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 35px);
  }
}
@keyframes run2 {
  0%,
  50% {
    transform: translate(0, 35px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.container2 {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../assets/image/index_bg.png");
  background-size: 100% 100%;
  color: #4ecfbd;
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.3);
}

.left {
  display: flex;
  float: left;
  width: 25%;
  height: 100%;
  padding: 20px 0 20px 0;
  flex-direction: column;
  justify-content: space-between;
}
.leftItem {
  width: 100%;
  height: 32%;
}
.right {
  display: flex;
  float: right;
  width: 25%;
  height: 100%;
  padding: 20px 0 20px 0;
  flex-direction: column;
  justify-content: space-between;
}
.rightItem {
  width: 100%;
  height: 32%;
}
.center {
  display: flex;
  float: left;
  width: 49%;
  height: 100%;
  padding: 20px 0 20px 0;
  flex-direction: column;
  justify-content: space-between;
}
.center .title {
  width: 100%;
  height: 10%;
  background-image: -webkit-linear-gradient(bottom, #ffffff, #4ecfbd);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.8rem;
  letter-spacing: 0.5em;
}
.weather {
  width: 100%;
  height: 17%;
}
.weatherItem1 {
  float: left;
  width: 40%;
  height: 100%;
}
.runTime {
  margin: 5% auto;
  width: 90%;
  height: 37%;
  color: #ffffff;
  font-size: 2rem;
  line-height: 3.2rem;
}
.nowTime {
  margin: 0 auto;
  width: 90%;
  height: 32%;
  color: #ffffff;
  font-size: 1rem;
}
.weatherItem2 {
  float: left;
  margin-left: 15px;
  width: 55%;
  height: 100%;
}
.weatherItem2:after {
  content: "";
  position: absolute;
  left: auto;
  top: auto;
  bottom: 15%;
  left: 40%;
  height: 70%;
  width: 2px;
  background-color: #1e90ff;
}
.weatherIcon {
  float: left;
  margin: 2% auto;
  width: 45%;
  height: 85%;
  color: #ffffff;
  transform: scale(0.8);
}

.icon {
  width: 25%;
  height: 100%;
}
.weatherInfo {
  float: right;
  margin-right: 2%;
  margin-top: 2%;
  width: 50%;
  height: 90%;
}
.weatherInfo > div {
  margin-top: 2%;
  width: 90%;
  height: 25%;
  color: #ffffff;
  font-size: 1.1rem;
}
.chinaMap {
  display: flex;
  position: relative;
  margin-top: 2%;
  width: 100%;
  height: 95%;
  flex-direction: row;
}
.itemTitle {
  margin: 0 auto;
  width: 95%;
  height: 15%;
  font-size: 1rem;
  line-height: 280%;
}
.itemTitle_left {
  float: left;
  width: 48%;
  height: 100%;
  line-height: 300%;
}
.itemTitle_right {
  float: right;
  margin-right: 5px;
  width: 50%;
  height: 100%;
  text-align: right;
}
.itemTitle_right >>> .el-switch.is-checked .el-switch__core {
  border-color: #4ecfbd;
  background-color: #4ecfbd;
}
.itemTitle_right >>> .el-switch__label.is-active {
  color: #4ecfbd;
}
.itemTitle_right >>> .el-switch__label {
  color: #ffffff;
  font-size: 0.8rem;
}
.itemTitle_right_btn2 {
  float: right;
  margin-top: 4%;
  margin-right: 2%;
  width: 30%;
  height: 60%;
}
.itemTitle_right_btn2 > ul {
  list-style: none;
  width: 100%;
  height: 100%;
  border: 1px solid #0e94ea;
}
.itemTitle_right_btn2 li {
  float: left;
  width: 50%;
  height: 100%;
  font-size: 0.9rem;
  background-color: rgba(14, 148, 234, 0.2);
  color: #cdddf7;
  line-height: 180%;
  z-index: 39;
}
.itemTitle_right_btn2 li.active,
.itemTitle_right_btn2 li:hover {
  cursor: pointer;
  color: white;
  background: #0e94eb;
}
</style>